import styled from 'styled-components';
import * as React from 'react';
import { Button as AntButton, List } from 'antd';
import { UserOutlined, } from '@ant-design/icons';

import { ListItem, Button } from '../../../components';
import { logout } from '../../../utils';
import { useLayoutContext } from '../../../api';

const categories: Array<any> = [
    {
        icon: <UserOutlined />,
        title: '账户',
        code: 'account'
    }
];

export const CategoryList = (props: { category: string, onChange: (category: string, item: any) => void }) => {

    const [_peerId, _homePath, applicationProps] = useLayoutContext();

    return (
        <Container>
            <Group key={`group_def`}>
                <List
                    style={{
                        width: '100%',
                        flex: 1,
                        overflow: 'auto'
                    }}
                    itemLayout="horizontal"
                    dataSource={categories}
                    renderItem={(category, ci) => (
                        <ListItem
                            key={`category_def_${ci}`}
                            icon={
                                <Button
                                    active={category.code === props.category}
                                    width={40}
                                    icon={category.icon}
                                ></Button>
                            }
                            reverseFill={true}
                            title={category.title}
                            active={category.code === props.category}
                            description={category.description}
                            onClick={async () => {
                                props.onChange(category.code, category);
                            }}></ListItem>
                    )}
                />
            </Group>
            {
                applicationProps.settings && applicationProps.settings.map((item, index) => {
                    return (
                        <Group key={`group_${index}`}>
                            <GroupTitle>{item.group}</GroupTitle>
                            {
                                item.children && item.children.length > 0 && <List
                                    style={{
                                        width: '100%',
                                        flex: 1,
                                        overflow: 'auto'
                                    }}
                                    itemLayout="horizontal"
                                    dataSource={item.children}
                                    renderItem={(category, ci) => (
                                        <ListItem
                                            key={`category_${item.group}_${ci}`}
                                            icon={
                                                <Button
                                                    active={category.code === props.category}
                                                    width={40}
                                                    icon={category.icon}
                                                ></Button>
                                            }
                                            reverseFill={true}
                                            title={category.title}
                                            active={category.code === props.category}
                                            onClick={async () => {
                                                props.onChange(category.code, category);
                                            }}></ListItem>
                                    )}
                                />
                            }
                        </Group>
                    );
                })
            }
            <ExitContainer>
                <AntButton type="primary" danger style={{ minWidth: '180px' }} onClick={() => {
                    logout();
                    window.location.href = `${window.location.origin}/#/login`;
                }}>退出登录</AntButton>
            </ExitContainer>
        </Container>
    );
}

export default CategoryList;

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap:10px;
    background-color: #FFF;
`;

const Group = styled.div`
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
`;


const GroupTitle = styled.div`
    color: #A9A9A9;
    font-size: 14px;
    padding:0 10px;
`;


const ExitContainer = styled.div`
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
`;